<template>
  <div class="navbar">
    <div class="left_navbar" @click="backHome()">
      <span class="welcome">嗨，欢迎来到花语轩！</span>
    </div>
    <div class="middle_navbar">
      <!-- <a href="#">你好，请登录</a>&nbsp; -->
      <span @click="skipLogin()">你好，{{userName}}&nbsp;&nbsp;&nbsp;</span>
      <span @click="skipRegister()">免费注册</span>
    </div>
    <div class="right_navbar">
      <i class="el-icon-document" @click="skipOrder()">&nbsp;我的订单</i>
      &nbsp;
      <i class="el-icon-shopping-cart-2" @click="skipCart()">&nbsp;购物车</i>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userName"]),
  },
  methods: {
    skipOrder() {
      this.$router.push({ path: "/order" }).catch((err) => err);
    },
    skipCart() {
      this.$router.push({ path: "/cart" }).catch((err) => err);
    },
    skipLogin() {
      this.$router.push({ path: "/login" }).catch((err) => err);
    },
    skipRegister() {
      this.$router.push({ path: "/register" }).catch((err) => err);
    },
    backHome() {
      this.$router.push({ path: "/" }).catch((err) => err);
    },
    init() {},
  },
};
</script>

<style lang="scss" >
.navbar {
  font-size: 20px;
  color: #9999a5;
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 50px;
  background-color: #f2f2f2;
  .left_navbar {
    // border: 1px solid black;
    width: 40%;

    margin-left: 40px;
    line-height: 50px;
    .welcome:hover {
      cursor: pointer;
      text-decoration-line: underline;
      color: #884e22;
    }
  }
  .middle_navbar {
    line-height: 50px;
    span:hover {
      cursor: pointer;
      text-decoration-line: underline;
      color: #884e22;
    }
  }
  .right_navbar {
    width: 20%;

    // border: 1px solid black;

    line-height: 50px;
    .el-icon-document:hover,
    .el-icon-shopping-cart-2:hover {
      cursor: pointer;
      text-decoration-line: underline;
      color: #884e22;
    }
  }
}
</style>